<template>
  <div class="report-setting">
    <!-- 报表类型切换 -->
    <el-tabs v-model="activeTab" class="report-tabs">
      <el-tab-pane label="自定义报表" name="custom">
        <div class="custom-report">
          <div class="header">
            <el-button type="primary" @click="handleCreateReport">新建报表</el-button>
          </div>
          <el-table :data="customReports" border style="width: 100%">
            <el-table-column prop="name" label="报表名称" width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="creator" label="创建人"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="primary" @click="handlePreview(scope.row)">预览</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预置报表" name="preset">
        <div class="preset-report">
          <el-card class="report-card" v-for="report in presetReports" :key="report.id">
            <div slot="header">
              <span>{{ report.name }}</span>
            </div>
            <div class="report-content">
              <p>{{ report.description }}</p>
              <div class="report-actions">
                <el-button type="primary" @click="handleViewReport(report)">查看报表</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 新建/编辑报表对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="reportForm" label-width="100px">
        <el-form-item label="报表名称">
          <el-input v-model="reportForm.name" placeholder="请输入报表名称"></el-input>
        </el-form-item>
        <el-form-item label="统计周期">
          <el-select v-model="reportForm.period" placeholder="请选择统计周期">
            <el-option label="日" value="day"></el-option>
            <el-option label="周" value="week"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="年" value="year"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统计指标">
          <el-checkbox-group v-model="reportForm.metrics">
            <el-checkbox label="attendance">出勤率</el-checkbox>
            <el-checkbox label="late">迟到次数</el-checkbox>
            <el-checkbox label="early">早退次数</el-checkbox>
            <el-checkbox label="overtime">加班时长</el-checkbox>
            <el-checkbox label="leave">请假天数</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveReport">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ReportSetting',
  data() {
    return {
      activeTab: 'custom',
      customReports: [
        {
          id: 1,
          name: '部门月度考勤报表',
          createTime: '2024-03-15',
          creator: '管理员'
        },
        {
          id: 2,
          name: '年度考勤统计报表',
          createTime: '2024-03-14',
          creator: '管理员'
        }
      ],
      presetReports: [
        {
          id: 'daily',
          name: '每日考勤统计',
          description: '统计每日员工出勤、迟到、早退等考勤数据'
        },
        {
          id: 'monthly',
          name: '月度考勤汇总',
          description: '汇总展示月度考勤数据，包含出勤率、加班时长等指标'
        }
      ],
      dialogVisible: false,
      dialogTitle: '新建报表',
      reportForm: {
        name: '',
        period: 'month',
        metrics: []
      }
    }
  },
  methods: {
    handleCreateReport() {
      this.dialogTitle = '新建报表'
      this.reportForm = {
        name: '',
        period: 'month',
        metrics: []
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑报表'
      this.reportForm = {
        ...row,
        metrics: ['attendance', 'late'] // 示例数据
      }
      this.dialogVisible = true
    },
    handlePreview(row) {
      // TODO: 实现报表预览功能
      this.$message.info('预览报表：' + row.name)
    },
    handleDelete(row) {
      this.$confirm('确认删除该报表？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用删除API
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    handleViewReport(report) {
      // TODO: 实现查看预置报表功能
      this.$message.info('查看报表：' + report.name)
    },
    handleSaveReport() {
      // TODO: 保存报表配置
      this.$message.success('保存成功')
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.report-setting {
  padding: 20px;
}

.report-tabs {
  background-color: #fff;
  padding: 20px;
}

.custom-report .header {
  margin-bottom: 20px;
}

.preset-report {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.report-card {
  margin-bottom: 20px;
}

.report-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-actions {
  display: flex;
  justify-content: flex-end;
}
</style>